<template>
  <div class="contains">
    <city-header></city-header>
    <city-search></city-search>
    <city-main
      :hotCities="hotCities"
      :cities="cities"></city-main>
    <city-a-b-c :cities="cities"></city-a-b-c>
  </div>
</template>

<script>
  import CityHeader from './component/CityHeader.vue'
  import CitySearch from './component/CitySearch.vue'
  import CityMain from './component/CityMain.vue'
  import CityABC from './component/CityABC.vue'
  import axios from 'axios'

  export default {
    name: 'City',
    components: {
      CityHeader,
      CityMain,
      CityABC,
      CitySearch
    },
    methods: {
      getCity () {
        axios.get('/api/city.json').then(this.onSuccess)
      },
      onSuccess (res) {
        var response = res.data.data
        this.hotCities = response.hotCities
        this.cities = response.cities
      }
    },
    mounted () {
      this.getCity()
    },
    data () {
      return {
        hotCities: [],
        cities: {}
      }
    }
  }
</script>

<style lang="stylus" type="text/stylus" rel="stylesheet/stylus" scoped>
  /*@import '~styles/varibles.styl'*/
  /*@import '~styles/mixins.styl'*/
  /*.icons >>> .swiper-container*/
  .contains {
  }
</style>
